<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    *
    {
        margin: 0;
        padding: 0;
        /* 内减模式 */
        box-sizing: border-box;
    }
    body
    {
        background-color: #f3f5f7;
    }
    /* 版心 */
    .wrapper
    {
        width: 1200px;
        margin: 0 auto;
    }
    /* 清除浮动 */
    .clearfix::before,.clearfix::after
    {
        content: "";
        display: table;
    }
    .clearfix::after
    {
        clear: both;
    }
    /* 去除li前面的小点 */
    li
    {
        list-style: none;
    }
    /* 去除链接的下划线 */
    a
    {
        text-decoration: none;
    }


    /* 标题 */
    .title{
        position:fixed;
        width: 100%;
        height: 70px;
        background-color:rgb(38,47,62);
    }

    .title .left{
        float:left;
        margin:18px;

        color: white;
        font: 30px 楷体;
    }

    .title .search{
        float: left;
        margin: 18px 0 0 450px;
    }

    .title .search input{
        padding: 5px ;
        width: 200px;
        height: 35px;
        border: none;
        outline: none;
        color: white;
        background-color: rgb(52,66,88);
    } 

    .title .search img{
        margin-left: -5px;
        width: 35px;
        height: 35px;
        cursor: pointer;
        vertical-align: middle;
    }

    .title .account img{
        float: right;
        margin: 18px 50px 0 0;
        width: 40px;
        height: 40px;
    }

    /* 侧边栏 */
    .sidebar {
        position:fixed;
        float: left;
        margin-top: 70px;
        width: 200px;
        height: 819px;
        background-color: rgb(30,34,45);
    }

    .sidebar li{

        float: left;
        padding: 18px;
        background-color: rgb(30,34,45);
        
        cursor: pointer;
        width: 100%;
        height: 60px;
        border: none;
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: 0.4s;
    }

    .sidebar li:hover {
        background-color: rgb(38,47,62);
    }

    .sidebar a{
        color: rgb(193,198,200);
    }

    /* 添加用户 */
    .Adduser{
        float: left;
        margin:180px 0 0 650px;
        width: 450px;
        height: 600px;
        background-color: #fff;
        box-shadow: 0px 2px 3px 0px rgba(118, 118,118,0.2);
    }
    
    </style>
</head>
<body>
    <!-- 标题 -->
    <div class="title">
        <div class="left">订餐管理系统</div>
        <div class="search">
            <input type="text" placeholder="搜索商户，产品...">
            <img src="./picture/search.png" alt="">
        </div>
        <div class="account">
            <img src="./picture/user.png" alt="">
        </div>
    </div>
    <!-- 侧边栏 -->
    
    <div class="sidebar">
        <ul>
            <a href="canteen.html" ><li >餐厅信息</li></a>
            <a href="user.html" style="color: rgb(255,255,255);"><li style= "background-color: rgb(0,110,255); ">用户信息</li></a>
            <a href="manager.html" ><li >个人信息</li></a>
        </ul>       

    </div>
    <!-- 添加用户 -->
    <div class="Adduser">

    </div>
</body>
</html>
</head>
<body>
    
</body>
</html>